昨天寫超爛的class點閱居然破百，這不是公開處刑嗎

今天要來講模組相關的，這功能也是在寫React的時候常會用到

甚麼是模組化?為什麼需要模組化

模組化就是把一個大的系統拆成許多負責特定的功能的小塊，
每個小塊只負責把自己的功能做好。

用手機跟自組桌機來比喻，你手機壞了只能整支送原廠，然後原廠跟你說只能換主機板要一萬多，
自組桌機哪個地方壞了，只要壞的部分換個新的照樣爽爽用電供爆炸把整台燒了不算
買零件時只要看規格符合就能裝，不用擔心廠牌或零件內部細節。

程式也是一樣，如果今天把整個電商網站寫在一個檔案內，想修改特定功能時會很想死，
但如果把各個功能分開成各個檔案，DEBUG或增加新功能就很方便。

ES6模組

ES6的模組是以檔案為單位，一個模組可以匯出(export)指定的識別項，沒被匯出的就不能從外部存取，
外部程式可以經由匯入(import)來使用這些外部的識別項。

簡單的例子

//module.js
export var a = '我在模組裡~~~'; //匯出一個變數a

//-----------------------------
//script.js
import { a } from './module.js'; //將a匯入
console.log(a);//印出 我在模組裡~~~

各種匯出匯入

• 一般匯出匯入
  
  把想要匯出的識別項前面加上export就能匯出

//module.js
export var a = '我在模組裡~~~';
export var b = '也在模組';
export var c = '應該在模組裡';

如果多個想匯出的，可以在最後一起匯出

//module.js
var a = '我在模組裡~~~';
var b = '也在模組';
var c = '應該在模組裡';

export { a, b, c };

一般匯入的方式，只要在大括號內放要匯入的識別項名就能匯入了

//script.js
import { a, b, c } from './module.js';  //從module.js匯入 a b c三個變數

console.log(a, b, c);//我在模組裡~~~ 也在模組 應該在模組裡

• 設定預設的匯出項
  
  在export的後面在加上default，可以設定預設的匯出項
  

//module.js
var a = '我在模組裡~~~';
export default a;
export var b = '也在模組';
export var c = '應該在模組裡';

此時不指定特定的名稱的話，會匯入預設的匯出項

//script.js
import something from './module.js';
//不需要加大括號  名稱可以隨意取喜歡的

console.log(something);//我在模組裡~~~

當然還是可以無視預設匯出，指定想要的匯入項

//script.js
import { b } from './module.js';
console.log(b);//也在模組

• 改變匯入匯出名稱
  
  有時候需要匯入的項目名稱很長時，也能手動改成好記的名稱
  

//module.js
export var Pneumonoultramicroscopicsilicovolcanoconiosis = '火山矽肺病';
//------------------------------------------------------------
//script.js
import { Pneumonoultramicroscopicsilicovolcanoconiosis as sick } from './module.js';
//將很長的名稱改短

console.log(sick);//火山矽肺病

也可以在匯出的地方更名

var Pneumonoultramicroscopicsilicovolcanoconiosis = '火山矽肺病';
export { Pneumonoultramicroscopicsilicovolcanoconiosis as sick };

鐵人還剩4天繼續加油~